<template>
	<view class="newOrder">
		<view class="form">
			<view class="select">
				<view class="text">
					<text class="text-icon">*</text>
					<text class="text-name">选择产品:</text>
				</view>
				<view class="picker">
					<view class="select-input">
						<view class="select-input-left">
							<input v-model="matId" style="" placeholder="请选择或输入" type="text" />
							<!-- <text v-if="productList && productList[productListIndex]">{{
									productList[0] || "-"
								}}</text>
							<text v-else>请选择</text> -->
							<view class="matIdBtn">
								<view @tap="pointOut" class="matIdBtn1">
									选择
								</view>
								<view @tap="add" class="matIdBtn2">
									{{
										index === undefined ? "添加" : "确认"
									}}
								</view>
								<view v-if="index" @tap="del" style="background-color: rgb(255, 205, 46)"
									class="matIdBtn2">
									删除
								</view>
							</view>
						</view>
						<!-- <picker v-if="productList.length>0" range-key="proName" @change="change" :value="productListIndex" :range="productList.map(item => item.matId) ">
							<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
						</picker> -->
						<!-- <u-icon @tap="pointOut" name="arrow-down" color="#272727" size="24rpx"></u-icon> -->
					</view>
				</view>
				<!-- <view class="toast"  @tap="toast">
					<input v-model="matId" style="text-indent: 1em;" placeholder="请选择" type="text" />
				</view> -->
			</view>
			<view class="form_item1">
				<view class="text">
					<text>*</text>
					单价:
				</view>
				<view class="input"><input v-model="realPrice" type="digit" placeholder="请输入单价" /></view>
			</view>
			<view class="form_item1">
				<view class="text">
					<text>*</text>
					数量:
				</view>
				<view class="input">
					<input ref="number" :focus="focus" @blur="onblur" v-model="orderNum" type="digit"
						placeholder="请输入数量" />
						</view>
			</view>
		</view>
		<u-gap height="88"></u-gap>
		<!-- <view class="footer_btn">
			<view @tap="add" class="button-primary">{{
				index === undefined ? "添加" : "确认"
			}}</view>
		</view> -->
		<materialSelect @change="change" :sid="sid" ref="material" />
	</view>
</template>

<script>
	import materialSelect from "@/components/materialSelect.vue"
	export default {
		components: {
			materialSelect
		},
		data() {
			return {
				index: undefined,
				matId: "",
				matName: "",
				realPrice: "",
				orderNum: "",
				productList: [],
				productListIndex: 0,
				sid: "",
				matSku: "",
				focus: false
			};
		},
		async onLoad(options) {
			this.sid = options.sid
			await this.productListApi();
			// console.log(options)
			this.index = options.index;
			this.matId = options.matId || this.productList[this.productListIndex]?.id || '';
			this.matName = options.matName || "";
			this.realPrice = options.realPrice || "";
			this.orderNum = options.orderNum || "";
			uni.setNavigationBarTitle({
				title: this.index === undefined ? "产品添加" : "产品编辑"
			});
			this.$nextTick(() => {
				this.pointOut()
			})
			// uni.$on('change',(data)=>{
			// 	console.log(data)
			// })
		},
		methods: {
			pointOut() {
				this.$refs.material.open()
				// uni.showToast({
				// 	title:"暂无数据",
				// 	icon:"none"
				// })
			},
			del() {
				uni.showModal({
					title: '删除',
					content: '确定删除',
					success: res => {
						if (res.confirm) {
							let list = uni.getStorageSync("purchaseEntryList") ?
								JSON.parse(uni.getStorageSync("purchaseEntryList")) : [];
							list.splice(this.index, 1);
							uni.setStorageSync('purchaseEntryList', JSON.stringify(list));
							uni.showToast({
								title: "删除成功",
								icon: "none",
								duration: 1000,
								mask: true,
							});


			uni.navigateBack({
								delta: 1,
							});

						}
					}
				});
			},
			change(matId, matName, realPrice, matSku) {
				this.$nextTick(() => {
					this.focus = true
				})
				this.matId = matId
				this.matSku = matSku
				// this.productListIndex = e.detail.value;
				// this.matId = this.productList[this.productListIndex].matId;
				// this.matName = this.productList[this.productListIndex].matName;
				this.$api.qryMaterialInfo({
					matId: matId,
					sid: this.sid,
					matSku: this.matSku
				}).then(res => {
					this.realPrice = res.result.list[0].matPrice || 0
				})
			},
			onblur() {
				this.focus = false;
			},
			productListApi() {
				this.$api
					.materialPage({
						data: {
							pageNo: 1,
							pageSize: 999,
							sid: this.sid,
						}
					})
					.then((res) => {
						console.log(res)
						this.productList = res.result.list || [];
					});
			},
			add() {
				if (!this.productList) {
					uni.showToast({
						title: "请选择产品",
						icon: "none",
					});
					return;
				}
				if (!this.realPrice) {
					uni.showToast({
						title: "请输入单价",
						icon: "none",
					});
					return;
				}
				if (!this.orderNum) {
					uni.showToast({
						title: "请输入数量",
						icon: "none",
					});
					return;
				}

				let {
					matId,
					matName,
					realPrice,
					orderNum,
					index
				} = this;
				let list = uni.getStorageSync("purchaseEntryList") ?
					JSON.parse(uni.getStorageSync("purchaseEntryList")) : [];
				if (index === undefined) {
					let cur = list.findIndex(
						(e) => e.matId === matId && e.realPrice === realPrice
					);
					if (cur !== -1) {
						list[cur].orderNum =
							parseInt(list[cur].orderNum) + parseInt(orderNum);
					} else {
						list.push({
							matId,
							matName,
							realPrice,
							orderNum,
						});
					}
				} else {
					// 编辑处理
					list[index] = {
						matId,
						matName,
						realPrice,
						orderNum,
					};
				}

				list.forEach((e) => {
					e.total = (parseFloat(e.realPrice) * parseFloat(e.orderNum)).toFixed(2);
				});

				uni.setStorageSync("purchaseEntryList", JSON.stringify(list));
				uni.showToast({
					title: index === undefined ? "添加成功" : "编辑成功",
					icon: "none",
					duration: 1000,
					mask: true,
				});

				uni.navigateBack({
					delta: 1,
				});

			},
			toast() {
				uni.showToast({
					title: "暂无产品",
					icon: "none"
				})
			},
		
		},
	};
</script>

<style lang="scss" scoped>
	.select {
		margin-bottom: 36rpx;

		.text {
			margin: 20rpx 0;
			color: #bdbdbd;

			.text-icon {
				color: #fe3430;
			}

			.text-name {
				margin-left: 10rpx;
			}
		}

		input,
		.select-input {
			width: 100%;
			height: 94rpx;
			background: #f2f2f2;
			border-radius: 47rpx;
		}

		.select-input {
			font-size: 30rpx;
			color: #272727;
			// padding: 0 36rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			// background-color: #cfc;
			.select-input-left {
				flex: 1;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					text-indent: 1em;
				}

				.matIdBtn {
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						width: 100rpx;
						background-color: #fe3430;
						margin-left: 20rpx;
						color: #fff;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						border-radius: 40rpx;
					}
				}
			}
		}

		.input {
			display: flex;
			align-items: center;
			justify-content: space-between;

			input {
				width: 271rpx;
			}

			text {
				text-align: left;
			}
		}
	}

	.newOrder {
		min-height: calc(100vh - 44px - env(safe-area-inset-top));
		background: #fff;

		.form {
			padding: 32rpx 68rpx 0;

			.form_item1 {
				margin-bottom: 36rpx;

				.text {
					color: #bdbdbd;
					margin-bottom: 24rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					.note {
						width: 613rpx;
						height: 181rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
					}

					input {
						height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					button {
						width: 73rpx;
						height: 38rpx;
						background: #fe3430;
						border-radius: 49rpx;
						color: #fff;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.footer_btn {
			display: flex;
			justify-content: space-around;
			position: absolute;
			bottom: 44px;
			width: 100%;
			left: 0;

			.button-primary {
				width: 280rpx;
			}
		}
	}
</style>